<template>
	<view class="content">
		<!-- 加载动画 -->
		<orange-fullloading
			text="加载中"
			:loadshow="loadingStatus">
		</orange-fullloading>
		<!-- #ifdef MP-WEIXIN -->
		<view class="w-100 row" style="height: 80rpx;">
			<view class="row text-muted" style="width: 90%;height: 60rpx;border-radius: 30rpx;background-color: rgba(223, 223, 223,.6);" @tap="toSearch">
				<view class="iconfont icon-sousuo font-s-4"></view>
				<view class="ml-2">搜索商品</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="d-f">
			<!-- 左边 -->
			<scroll-view scroll-y :scroll-into-view="scrollInto" scroll-with-animation class="left-aside">
				<view class="category-list row" v-for="(item, index) in categorylist" v-if="item.id != 30" :key="index" @click="leftMenuClick(index)" :id="'tab'+ index" :class="{active: tabarIndex == index}">
					<view class="underline"></view>
					<view class="category-name row font-s-5 flex-1">{{ item.cname }}</view>
				</view>
			</scroll-view>
			<!-- 右边 -->
			<scroll-view scroll-with-animation scroll-y class="right-aside">
				<view v-for="item in rightMenu" :key="item.id" class="pt-3 ml-2" v-if="item.children.length > 0">
					<view class="font-s-5 font-w"> {{item.cname}}</view>
					<view  class="row-ac-fw">
						<view class="category-top row-a-j-fc mt-2" v-for="items in item.children" :key="items.id" @click="navToList(items.id)">
							<view class="category">
								<view class="category-image"><image :src="items.cover || nopictures" mode=""></image></view>
								<view class="category-item font-s-3 row">{{ items.cname }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
import { getCategory} from '@/api/index';
import $json from '@/json.js'; //虚拟数据
export default {
	data() {
		return {
			nopictures:this.$Management.nopictures,
			tabarIndex:0,
			scrollInto:"",
			category: [],
			rightMenu: [],
			allRightMenu:[],
			categorylist:[],
			loadingStatus: true
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		async loadData(){
			await this.getCategorylist()
			// 异步延迟加载
			setTimeout(() => {
				this.loadingStatus = false
			}, 100)
		},
		//点击搜索前往搜索页面
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '/pages/index/search/search'
			});
		},
		getCategorylist(){
			this.$R.get(getCategory)
			.then((res)=>{
				this.categorylist= res.data
				this.rightMenu = this.categorylist[0].children
			})
		},
		leftMenuClick(index) {
			this.rightMenu = this.categorylist[index].children;
			this.tabarIndex = index;
			if (this.tabIndex === index) {
				return;
			}
			// 滚动到指定位置
			this.scrollInto = 'tab' +index
		},
		// #ifdef MP-WEIXIN
		//微信跳转到搜索页面
		toSearch(){
			uni.navigateTo({
				url: '/pages/index/search/search'
			});
		},
		// #endif
        navToList(categoryId){
        	uni.navigateTo({
        		// url: '/pages/product/list?categoryId=' + categoryId,
        		url: '/pages/product/list?type=category&id='+categoryId,
        	});
        }
	}
};
</script>
<style lang="scss">
page,
.content {
	height: 100%;
	background-color: #f5f5f5;
}
.left-aside {
	flex-shrink: 0;
	width: 200rpx;
	height: 100%;
	background-color: #f5f5f5;
	.category-list{
		width: 100%;
		height: 120rpx;
		.underline{
			width: 8rpx;
			height: 120rpx;
			border-radius: 4rpx;
			margin-right: 10rpx;
		}
	}
	.active{
		background: #FFFFFF;
	}
	.active .category-name{
	  color: $bg-main-color !important;
	}
	.active .underline{
	 background-color:$main-color;
	}
}
.right-aside {
	flex: 1;
	overflow: hidden;
	padding-left: 15rpx;
	background-color: #FFFFFF;
	.category-top {
		.category {
			margin: 10rpx 18rpx;
			.category-image {
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 3rpx;
				}
			}
		}
	}
}
</style>
